<template>
  <div id="app">
    <button @click="loadNormalDatas">load normal datas</button>
    <button @click="loadForzenDatas">load frozen datas</button>
    <h1>normal datas count: {{ normalDatas.length }}</h1>
    <h1>freeze datas count: {{ freezeDatas.length }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      normalDatas: [],
      freezeDatas: [],
    };
  },
  methods: {
    loadNormalDatas() {
      this.normalDatas = this.getData();
      console.log("normalDatas", this.normalDatas);
    },
    loadForzenDatas() {
      this.freezeDatas = Object.freeze(this.getData());
      console.log("freezeDatas", this.freezeDatas);
    },
    getData() {
      return Array.from({ length: 1000000 }).map((_, i) => {
        return {
          id: i,
          name: `name${i}`,
          address: {
            city: `city${i}`,
            province: `province${i}`,
          },
        };
      });
    },
  },
};
</script>
